<template>
  <div class="el-form-item asterisk-left">
    <label
      id="el-id-5752-116"
      for="el-id-5752-175"
      class="el-form-item__label"
      :style="`width: ${width};`"
      v-if="label !== null"
    >
      {{ label }}
    </label>
    <div class="el-form-item__content">
      <div class="el-input">
        <!-- input -->
        <!-- prepend slot -->
        <slot name="prepend"></slot>
        <!--v-if-->
        <div class="el-input__wrapper">
          <!-- prefix slot -->
          <slot name="prefix"></slot>
          <!--v-if-->
          <input
            class="el-input__inner"
            type="text"
            autocomplete="off"
            tabindex="0"
            id="el-id-5752-175"
          />
          <!-- suffix slot -->
          <slot name="suffix"></slot>
          <!--v-if-->
        </div>
        <!-- append slot -->
        <!--v-if-->
      </div>
    </div>
  </div>
</template>

<script lang="ts">
export default {
  name: 'jc-input'
}
</script>

<script lang="ts" setup>
const props = withDefaults(
  defineProps<{
    width: number
    label: string | null
  }>(),
  {
    width: 120,
    label: null
  }
)
</script>

<style lang="scss"></style>
